<!-- 选择用户 -->

<template>
  <div class="FormChoose" :class="className">
    <div class="FormChoose-left">
      <MyOrgan class="FormChoose-MyTree el-textarea__inner" @change="toRefresh" />
      <MyWaiting class="FormChoose-MyWaiting el-textarea__inner" />
    </div>

    <div class="FormChoose-middle">
      <MyBtn class="FormChoose-MyBtn" @change="toChange" />
    </div>

    <div class="FormChoose-right">
      <MyChosen class="FormChoose-MyChosen el-textarea__inner" />
    </div>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import store from './store'
import props from './props'

const transOrganScope = (tree = [], scope) => {
  if (!scope) return tree
  const arr = tree.map(item => {
    const children = transOrganScope(item.children, scope)
    return { ...item, children }
  })
  return arr.filter((item) => item.applicationScope.includes(scope) || item.children.length)
}

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'ChooseUser',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixStore(store)],

  /**
   * 组件导入 (Abc.vue + Abc/index.vue)
   */
  ...CORE.components(
    require.context('../components', true, /vue$/),
    require.context('./', true, /vue$/),
  ),

  /**
   * 属性注册 (抽取以便查阅)
   */
  props,

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 应用范围
     */
    scope() {
      const { DICT: { SCOPE } } = this
      for (const [scope, , prop] of SCOPE) {
        if (this[prop]) return scope
      }
      return null
    },

    /**
     * 样式名
     */
    className() {
      const { $options: { name }, DICT: { SCOPE }, scope } = this
      const scopeStr = scope ? ` ${name}-${CORE.dict(SCOPE, scope, 2)}` : ''
      return `${name}${scopeStr}`
    },

    /**
     * 初始组织 ID 列表
     */
    initOrganIdList() {
      return this.scope ? Object.keys(this.organ_treeMap) : []
    },
  },

  /**
   * 监听属性 (深度 deep 首次 immediate)
   */
  watch: {
    /**
     * 监听数据对象
     */
    obj: {
      immediate: true,
      handler() {
        const { obj, bind, idKey, param, info, organId, $props, initOrganIdList } = this
        const id = CORE.isJSON(obj[bind]) ? obj[bind][idKey] : ''
        Object.assign(param, {
          name: '',
          treeId: organId || undefined,
          organId: organId ? [organId] : initOrganIdList,
          idList: id ? [id] : [],
        })
        Object.assign(info, $props) // 不能使用 setInfo()，防止深度复制
        this.toRefresh()
      },
    },

    /**
     * 监听禁用列表
     */
    grayed(grayed) {
      this.info.grayed = grayed
    },
  },

  /**
   * 创建完成 (先抽取再调用)
   */
  created() {
    this.param.scope = this.scope
    this.organ_setTree(transOrganScope(CORE.ORGAN.TREE, this.scope))
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 刷新列表
     */
    toRefresh() {
      const { treeId } = this.param
      this.param.organId = treeId ? [treeId] : this.initOrganIdList
      this.setList()
      this.startList()
    },

    /**
     * 切换选中
     */
    toChange(data) {
      this.$emit('change', data)
    },
  },
}
</script>

<style lang="scss">
@import './index.scss';
</style>
